<!-- 调节协议 -->
<template>
	<a-card :bordered="false">
		<a-form border="false" ref="searchFormRef" :model="searchFormState">
			<a-row :gutter="24">
				<a-col :span="5">
					<a-form-item label="创建人" name="createUser">
						<UserSelect v-model:value="searchFormState.createUser"/>
					</a-form-item>
				</a-col>
				<a-col :span="5">
					<a-form-item label="所属公司" name="deptId">
						<a-tree-select
							v-model:value="searchFormState.deptId"
							class="xn-wd"
							:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
							placeholder="请选择所属公司"
							allow-clear
							tree-default-expand-all
							:tree-data="treeData"
							:tree-default-expanded-keys="treeDefaultExpandedKeys"
							:field-names="{
								children: 'children',
								label: 'name',
								value: 'id'
							}"
						></a-tree-select>
					</a-form-item>
				</a-col>
				<a-col :span="4">
					<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
					<a-button style="margin: 0 8px" @click="searchFormRef.resetFields()">重置</a-button>
				</a-col>
			</a-row>
		</a-form>
	</a-card>
	<a-card :bordered="false" class="mt-2">
		<s-table
			ref="tableRef"
			:columns="columns"
			:data="loadData"
			bordered
			:row-key="(record) => record.id"
			:tool-config="toolConfig"
			:scroll="{ x: 'max-content' }"
			:customRow="customRow"
		>
			<template #operator>
				<a-space>
					<a-button type="primary" @click="formRef.onOpen()">
						<template #icon>
							<plus-outlined/>
						</template>
						新增
					</a-button>
				</a-space>
			</template>
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-space>
						<a-button type="link" primary size="small"
								  @click="openModal(record)">
							详情
						</a-button>
						<a-divider/>
						<a-button type="link" primary size="small" @click="formRef.onOpen(record)">编辑
						</a-button>
						<a-divider/>
						<a-button type="link" primary size="small"
								  v-if="!isBlank(record.debtorCardId)"
								  @click="generateMediationWord(record.id)">生成
						</a-button>
					</a-space>
				</template>
				<template v-if="column.dataIndex==='debtorCardId' && record.edit">
					<a-input v-model:value="record.debtorCardId"
							 style="width: 70%"/>
					<a-button type="link" @click="saveDebtorCardId(record)">保存</a-button>
				</template>
			</template>
		</s-table>
	</a-card>
	<a-modal title="分期详情" v-model:open="visibleDetailModal">
		<a-table :data-source="detailSource" :columns="detailColumns"/>
	</a-modal>
	<Form ref="formRef" @successful="tableRef.refresh(true)"/>
</template>

<script setup name="Company">
import Form from '@/views/tjzy/word/mediation/form.vue'
import wordMediationApi from "@/api/tjzy/word/mediation/wordMediationApi";
import downloadUtil from "@/utils/downloadUtil";
import {isBlank} from '@/utils/stringUtil'
import bizUserApi from "@/api/biz/bizUserApi";
import UserSelect from "@/components/XnUserSelector/userSelect.vue";

const searchFormRef = ref()
const searchFormState = ref({
	createUser: undefined,
	deptId: undefined
})
const tableRef = ref()
const formRef = ref()
const toolConfig = {refresh: true, height: true, columnSetting: false, striped: false}
const visibleDetailModal = ref(false)
const detailSource = ref([])
const treeData = ref([])
const treeDefaultExpandedKeys = ref([])
const columns = [
	{
		title: '调解员电话',
		dataIndex: 'mediatorPhone',
		align: 'center'
	},
	{
		title: '被申请人姓名',
		dataIndex: 'debtorName',
		align: 'center'
	},
	{
		title: '被申请人性别',
		dataIndex: 'debtorSexName',
		align: 'center'
	},
	{
		title: '被申请人身份证号',
		dataIndex: 'debtorCardId',
		align: 'center'
	},
	{
		title: '欠款人手机号',
		dataIndex: 'debtorPhone',
		align: 'center'
	},
	{
		title: '合同编号',
		dataIndex: 'contractNo',
		align: 'center'
	},
	{
		title: '合同开始日期',
		dataIndex: 'contractStartDate',
		align: 'center'
	},
	{
		title: '逾期天数',
		dataIndex: 'overdueDays',
		align: 'center'
	},
	{
		title: '欠款总额',
		dataIndex: 'overdueAmount',
		align: 'center'
	},
	{
		title: '结清金额',
		dataIndex: 'settlementAmount',
		align: 'center'
	},
	{
		title: '创建人',
		dataIndex: 'createUserName',
		align: 'center'
	},
	{
		title: '创建时间',
		dataIndex: 'createTime',
		ellipsis: true,
		align: 'center'
	},
	{
		title: '操作',
		dataIndex: 'action',
		align: 'center'
	}
]

const detailColumns = [
	{
		title: '序号',
		dataIndex: 'index',
		align: 'center'
	},
	{
		title: '还款金额',
		dataIndex: 'detailAmount',
		align: 'center'
	},
	{
		title: '还款时间',
		dataIndex: 'detailDate',
		align: 'center'
	}
]

const customRow = (record, index) => ({
	onDblclick: (event) => {
		record.edit = true
	}
})
const loadData = (parameter) => {
	searchFormState.value.current = parameter.current
	searchFormState.value.size = parameter.size
	return wordMediationApi.pageList(searchFormState.value).then((res) => {
		return res
	})
}

const saveDebtorCardId = (record) => {
	record.edit = false
	if (!record.debtorCardId.includes('****')) {
		wordMediationApi.saveDebtorCard(record.id, record.debtorCardId).then((res) => {
			tableRef.value.refresh(true)
		})
	}
}

const generateMediationWord = (id) => {
	wordMediationApi.generateMediationWord(id).then((res) => {
		downloadUtil.resultDownload(res)
	})
}

const openModal = (record) => {
	visibleDetailModal.value = true
	console.log(record.detailJson)
	detailSource.value = JSON.parse(record.detailJson).map((item, index) => {
		return {
			...item,
			index: index + 1
		};
	});
}
onMounted(() => {
	bizUserApi.userOrgTreeSelector().then((res) => {
		if (res !== null) {
			treeData.value = res
			// 默认展开2级
			treeData.value.forEach((item) => {
				// 因为0的顶级
				if (item.parentId === '0') {
					treeDefaultExpandedKeys.value.push(item.id)
					// 取到下级ID
					if (item.children) {
						item.children.forEach((items) => {
							treeDefaultExpandedKeys.value.push(items.id)
						})
					}
				}
			})
		}
	})
})
</script>
